<template>
    <div class="news-publish-container">
        <!-- 步骤导航 -->
        <div class="publish-steps">
            <div class="step-item active">
                <div class="step-number">1</div>
                <div class="step-name">待发布内容</div>
            </div>
            <div class="step-line"></div>
            <div class="step-item">
                <div class="step-number">2</div>
                <div class="step-name">发布设置</div>
            </div>
        </div>

        <!-- 分类筛选 -->
        <div class="publish-filters">
            <el-tag v-for="type in newsTypes" :key="type.value" class="filter-tag"
                :class="{ 'active-filter': currentFilter === type.value }" @click="handleFilterChange(type.value)">
                {{ type.label }} ({{ getTypeCount(type.value) }})
            </el-tag>
            <el-tag class="filter-tag" :class="{ 'active-filter': currentFilter === 'all' }"
                @click="handleFilterChange('all')">
                全部 ({{ publishList.length }})
            </el-tag>
            <!-- 新增“预览”按钮 -->
            <el-button type="primary" class="preview-btn" @click="handlePreview">预览</el-button>
        </div>

        <!-- 待发布列表 -->
        <div class="publish-list">
            <el-card v-for="(item, index) in filteredPublishList" :key="item.id" class="publish-card">
                <!-- 类型标签 -->
                <div class="news-type-tag" :style="{ backgroundColor: getTypeColor(item.classReal) }">
                    {{ getTypeName(item.classReal) }}
                </div>

                <!-- 标题 -->
                <div class="card-title">{{ item.title }}</div>

                <!-- 摘要 -->
                <div class="card-abstract">
                    {{ item.abstractReal }}
                </div>

                <!-- 元信息和操作 -->
                <div class="card-footer">
                    <div class="meta-info">
                        <span>来源：{{ item.newsSource }}</span>
                        <span>添加时间：{{ item.addTime }}</span>
                        <span>添加人：{{ item.addUser || '系统' }}</span>
                    </div>
                    <div class="card-actions">
                        <el-button type="text" class="remove-btn" @click="handleRemove(item.id)">移除</el-button>
                        <el-button type="text" @click="handleEdit(item)">编辑</el-button>
                    </div>
                </div>
            </el-card>

            <el-empty v-if="filteredPublishList.length === 0" description="当前分类下暂无待发布新闻"></el-empty>
        </div>

        <!-- 底部操作按钮 -->
        <div class="publish-actions">
            <el-button @click="handleBack">返回</el-button>
            <el-button type="primary" @click="handleNextStep" :disabled="publishList.length === 0">
                下一步：发布设置
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 路由实例
const route = useRoute()
const router = useRouter()

// 新闻类型配置
const newsTypes = [
    { color: '#83DAAD', label: '宏观形势', value: 1, key: 'macroEnvironment' },
    { color: '#EDBF45', label: '行业动态', value: 2, key: 'industryTrends' },
    { color: '#8E63B7', label: '产业链动态', value: 3, key: 'supplyChainDynamics' },
    { color: '#E8954F', label: '国际能源观察', value: 4, key: 'internationalEnergy' },
    { color: '#697798', label: '其他', value: 0, key: 'other' },
]

// 待发布列表
const publishList = ref([])
// 当前筛选类型
const currentFilter = ref('all')

// 编辑弹窗相关
const editVisible = ref(false)
const editForm = reactive({
    id: '',
    title: '',
    classReal: '',
    abstractReal: ''
})

// 初始化：接收传递的待发布列表
onMounted(() => {
    const listStr = route.query.publishList
    if (listStr) {
        try {
            publishList.value = JSON.parse(listStr)
        } catch (e) {
            console.error('解析待发布列表失败:', e)
            ElMessage.error('加载待发布列表失败')
        }
    } else {
        ElMessage.warning('未获取到待发布列表')
    }
})

// 筛选后的列表
const filteredPublishList = computed(() => {
    if (currentFilter.value === 'all') {
        return publishList.value
    }
    return publishList.value.filter(item =>
        item.classReal?.toString() === currentFilter.value.toString()
    )
})

// 获取类型名称和颜色
const getTypeName = (classReal) => {
    const type = newsTypes.find(t => t.value.toString() === classReal?.toString())
    return type ? type.label : '未知类型'
}

const getTypeColor = (classReal) => {
    const type = newsTypes.find(t => t.value.toString() === classReal?.toString())
    return type ? type.color : '#ccc'
}

// 获取类型数量
const getTypeCount = (typeValue) => {
    return publishList.value.filter(item =>
        item.classReal?.toString() === typeValue.toString()
    ).length
}

// 筛选切换
const handleFilterChange = (value) => {
    currentFilter.value = value
}

// 移除新闻
const handleRemove = (id) => {
    publishList.value = publishList.value.filter(item => item.id !== id)
    ElMessage.success('已移除该新闻')
}

// 编辑新闻
const handleEdit = (item) => {
    editForm.id = item.id
    editForm.title = item.title
    editForm.classReal = item.classReal.toString()
    editForm.abstractReal = item.abstractReal
    editVisible.value = true
}

// 保存编辑
const handleSaveEdit = () => {
    const index = publishList.value.findIndex(item => item.id === editForm.id)
    if (index !== -1) {
        publishList.value[index] = {
            ...publishList.value[index],
            title: editForm.title,
            classReal: editForm.classReal,
            abstractReal: editForm.abstractReal
        }
        ElMessage.success('编辑成功')
        editVisible.value = false
    }
}

// 返回上一页
const handleBack = () => {
    router.back()
}

// 下一步
const handleNextStep = () => {
    // 存储数据到本地
    localStorage.setItem('tempPublishList', JSON.stringify(publishList.value))
    // 跳转时不携带大量数据
    router.push({ name: 'newsPublishSetting' })
}

// 预览按钮点击事件
const handlePreview = () => {
    // 携带当前筛选后的列表内容跳转到preview路由
    router.push({
        name: 'preview',
        query: {
            list: JSON.stringify(filteredPublishList.value)
        }
    })
}
</script>

<style scoped>
.news-publish-container {
    padding: 24px;
    background-color: #fafbfc;
    min-height: 100vh;
}

/* 步骤导航 */
.publish-steps {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-left: 20px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
}

.step-item:not(.active) .step-number {
    background-color: #e5e6eb;
    color: #86909c;
}

.step-name {
    font-size: 14px;
    color: #303133;
}

.step-item:not(.active) .step-name {
    color: #86909c;
}

.step-line {
    flex: 1;
    height: 2px;
    background-color: #e5e6eb;
    margin: 0 15px;
}

.step-item.active~.step-line {
    background-color: #409eff;
}

/* 筛选标签 */
.publish-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding: 0 20px;
}

.filter-tag {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 16px;
    transition: all 0.2s;
}

.active-filter {
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #409eff;
}

/* 待发布列表 */
.publish-list {
    padding: 0 20px;
    margin-bottom: 30px;
}

.publish-card {
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    padding-top: 28px;
}

/* 类型标签 */
.news-type-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 10px;
    font-size: 12px;
    color: white;
    border-radius: 0 0 4px 0;
    font-weight: 500;
}

/* 卡片内容 */
.card-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #303133;
    padding: 0 16px;
}

.card-abstract {
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 0 16px;
    max-height: 80px;
    overflow: hidden;
    display: -webkit-box;
}

/* 卡片底部 */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px dashed #f0f0f0;
    font-size: 13px;
    color: #909399;
}

.meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.card-actions {
    display: flex;
    gap: 10px;
}

.remove-btn {
    color: #f56c6c;
}

.remove-btn:hover {
    color: #e4393c;
}

/* 底部操作按钮 */
.publish-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
}

.preview-btn {
    margin-left: 10px;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 14px;
}
</style>